<!--
 * @Author: tenet 18742176629@163.com
 * @Date: 2024-05-22 20:22:04
 * @LastEditors: toString
 * @LastEditTime: 2024-06-27 12:12:09
 * @FilePath: /chain-link-api-front/src/views/currencyApplication/index.vue
 * @Description: 上币申请
-->
<template>
  <Header>
    <template #title>{{ $t('title.CurrencyApplication') }}</template>
  </Header>
  <div class="container">
    <div class="leftBox">
      <div class="contentBox formBox">
        <h3>{{ $t('currencyApplication.DataSubmit') }}</h3>
        <h4>{{ $t('currencyApplication.Check') }} <span class="greenText" @click="checkRecord">{{
          $t('currencyApplication.DepositRecord')
            }}</span>
        </h4>
        <el-form :model="ruleForm" ref="ruleRef" :rules="rules" :hide-required-asterisk="true"
          label-position="right">
          <el-form-item prop="chainName" style="width: 100%; margin: .2rem 0">
            <el-select v-model.trim="ruleForm.chainName" :placeholder="$t('global.PleaseSelect') + $t('table.ChainName')">
              <el-option v-for="(item, index) in chainList" :key="index" :label="item.chainName" :value="item.chainName" />
            </el-select>
          </el-form-item>
          <el-form-item prop="address" style="width: 100% ;margin-bottom: .4rem">
            <el-input v-model.trim="ruleForm.address" :placeholder="$t('global.PleaseInputCallUrl')"
              style="border-radius: 30px" type="text">
            </el-input>
          </el-form-item>
          <div class="sub">
            <el-button @click="submit">{{ $t('global.Submit') }}</el-button>
          </div>
        </el-form>
      </div>
    </div>
    <div class="contentBox rightBox">
      <div class="textContent">
        <h4>{{ $t('currencyApplication.Tips') }}</h4>
        <p>
          {{ $t('currencyApplication.SubTips') }}</p>
        <ol>
          <li>{{ $t('currencyApplication.Tips1') }}</li>
          <li>{{ $t('currencyApplication.Tips2') }}
            <!-- <span class="greenText" @click="copy('support@udun.io')"> support@udun.io </span> -->
          </li>
        </ol>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue"
import { useRouter } from 'vue-router';
import Clipboard from 'clipboard';
import { ElMessage } from "element-plus";
import Header from '@/views/layout/header.vue'
import { addApplyToken, getConfigList, getApplyTokenList } from '../../require/api'
import { useI18n } from "vue-i18n";
import { useClipboard } from '@vueuse/core'

const { copy } = useClipboard({ legacy: true })
const { t } = useI18n();
// 在组件被挂载后执行
onMounted(() => {
  // getList()
  getChainList()
});

const router = useRouter();
const ruleRef = ref(null)
const pageSize = ref(10)
const pageIndex = ref(1)
const total = ref(0)
const tableData = ref([])
const chainList = ref([])

const rules = reactive({
  chainName: [{ required: true, message: t('message.ChainNameNotNull'), trigger: 'blur' }],
  address: [{ required: true, message: t('message.CallUrlNotNull'), trigger: 'blur' },],
})

const ruleForm = reactive({
  chainName: '',
  address: '',
})

// 重置表单
async function resetForm() {
  ruleForm.chainName = undefined
  ruleForm.address = ''
}

// 获取配置信息
async function getChainList() {
  const { data } = await getConfigList();
  chainList.value = data;
}

// 提交上币申请
async function submit() {
  ruleRef.value.validate(async (valid) => {
    if (!valid) {
      ElMessage.error(t('message.CheckInput'))
      return
    }
    try {
      const { code, msg } = await addApplyToken({
        chainName: ruleForm.chainName,    //链Name
        address: ruleForm.address,// '0xe58825d1DC47bdAA8f0C82fE40f4ed6fE5088354',  //币种地址
      })
      if (code === 200) {
        ElMessage.success(t('message.ApplicationSuccess'))
        await resetForm()
      } else {
        ElMessage.error(msg)
      }
    } catch (e) {
      console.log(e)
    }
  })
}

// 查看上币记录
async function checkRecord() {
  router.push({name: 'record'})

  // try {
  //   const { code } = await getApplyTokenList({
  //     pageIndex: pageIndex.value,
  //     pageSize: pageSize.value,
  //   })
  //   if (code === 200) {
  //     // router.push('/layout/record');
  //   }
  // } catch (e) {
  //   console.log(e)
  // }
}
</script>

<style scoped lang="less">
.el-alert {
  width: 20%;
  margin: 20px 0 0;
  position: fixed;
  top: .1rem;
}

.el-alert:first-child {
  margin: 0;
}

:deep(.el-form-item__label) {
  line-height: .56rem;
}

:deep(.el-select__wrapper) {
  width: 3rem;
  height: .56rem !important;
  line-height: .56rem;
  border-radius: .05rem;
  //width: 3rem !important;
}

:deep(.el-input__wrapper) {
  width: 3rem;
  height: .56rem !important;
  line-height: .56rem;
  border-radius: .05rem;
}

.greenText {
  color: #409eff;
}

.greenText:hover {
  cursor: pointer;
}

.container {
  width: 100%;
  height: 6rem;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  .leftBox {

    width: 50%;
    height: 6rem;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;


    .formBox {
      //position: absolute;
      //top: 100%;
      //left: 25%;
      //width: 2rem;
      height: 3.5rem;
      //height: 70%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: flex-start;

      h3 {
        font-family: PingFangSC-Semibold;
        font-size: .4rem;
        color: rgb(22, 38, 48);
        letter-spacing: -0.4px;
        line-height: .64rem;
        font-weight: 600;
      }

      h4 {
        font-family: PingFangSC-Medium;
        font-size: .17rem;
        color: rgba(22, 38, 48, 0.6);
        letter-spacing: -0.3px;
        line-height: .28rem;
        font-weight: 700;
        margin-bottom: .5rem;


        span:hover {
          cursor: pointer;
        }
      }

      .el-form {
        :deep(.el-select) {
          height: .56rem;
          line-height: .56rem;
        }
      }
    }

    .sub {
      width: 100%;
      //width: 3rem;
      height: .56rem;
      //margin-top: 1rem;
      display: flex;
      flex-direction: row;
      justify-content: center;


      :deep(.el-button) {
        background-color: #409eff;
        border-color: #409eff;
        border-radius: 8px;
        width: 2.4rem;
        width: 100%;
        height: .56rem;
        color: #fff;
      }

    }
  }

  .rightBox {
    width: 50%;
    height: 6rem;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;

    .textContent {
      width: 70%;
      height: 5rem;
      //height: 70%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;

      h4 {
        font-family: PingFangSC-Medium;
        font-size: .17rem;
        color: rgba(22, 38, 48, 0.6);
        letter-spacing: -0.3px;
        line-height: .28rem;
        font-weight: 700;

        span {
          color: rgb(5, 170, 105);
        }

        span:hover {
          cursor: pointer;
        }
      }

      p {
        margin: .2rem 0;
        text-align: left;
      }

      ol {
        li {
          text-align: left;
          margin: .05rem 0;

        }
      }
    }
  }

}
</style>
